<template>
  <div class="new-detail">
    <div class="detail-head">
      <van-icon name="arrow-left" @click="goBack" />详情
    </div>
    <div class="detail-content">
      <h3>{{ newData.title }}</h3>
      <div v-html="newData.content"></div>
    </div>
    <div class="detail-comment">
      <div class="comment-head">
        <h3>评论区</h3>
        <van-pagination
          v-model="info.pageNum"
          :page-count="totalPage"
          mode="simple"
          @change="pageChange"
        />
      </div>
      <ul class="comment-content">
        <li
          id="comment-detail"
          @click="getDetail(item.id)"
          v-for="item in commentList"
          :key="item.id"
          class="content-item"
        >
          <h3>
            用户：{{ item.userName }}
            <span @click.stop="likeComment(item.id)">
              点赞{{ item.likeNum }}
            </span>
          </h3>
          <p>{{ item.content }}</p>
          <span>{{ item.commentDate }}</span>
        </li>
      </ul>
    </div>
    <!-- 评论详情弹窗 -->
    <van-popup v-model="show" closeable get-container="#comment-detail">
      <h3>
        用户：{{ commentDetail.userName }}
        <span @click="likeComment(commentDetail.id)">
          点赞{{ commentDetail.likeNum }}
        </span>
      </h3>
      <p>{{ commentDetail.content }}</p>
      <span class="detail-time">评论时间：{{ commentDetail.commentDate }}</span>
    </van-popup>

    <!-- 发表评论 -->
    <div class="comment-sent">
      <h3>发表评论</h3>
      <div>
        <input type="text" v-model="commentVal" /><button
          @click="sendCommentData(newData.id)"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "@/mixin/flag";

import {
  getNewDetail,
  getNewComment,
  likeComment,
  getCommentDetail,
  commentSend,
} from "@/service/news";
export default {
  mixins: [mixin],
  data() {
    return {
      commentVal: "", // 发表评论内容
      commentDetail: {}, //评论详情
      show: false, // 评论详情弹窗开关
      newData: {}, // 新闻详情
      commentList: [], // 评论列表
      totalPage: "",
      info: {
        id: "", // 新闻id
        pageNum: 1, // 当前页码
        pageSize: 20, // 评论每页显示size
      },
    };
  },
  methods: {
    goBack() {
      // this.$router.go(-1);
      this.$emit("changflag", false);
    },
    //评论详情弹窗
    async getDetail(id) {
      this.show = true;
      const { data } = await getCommentDetail(id);
      if (data.code !== 200) this.$toast(data.msg);
      this.commentDetail = data.data;
      // console.log(this.commentDetail);
    },

    //发表评论
    async sendCommentData(id) {
      const info = {
        content: this.commentVal,
        newsId: id,
      };
      if (!info.content) return;
      const { data } = await commentSend(info);
      if (data.code !== 200) return this.$toast(data.msg);
      this.getNewCommentList();
      this.commentVal = "";
      return this.$toast("发表成功");
    },
    //点赞评论
    async likeComment(id) {
      const { data } = await likeComment(id);
      if (data.code !== 200) return this.$toast(data.msg);

      if (this.show) {
        this.getDetail(this.commentDetail.id);
      } else {
        this.getNewCommentList();
      }
    },
    // 获取新闻详情
    async getNewDetailData() {
      // const id = this.$route.query.id;
      const { data } = (await getNewDetail(this.info.id)) || {};
      if (data.code !== 200) this.$toast(data.msg);
      data.data.content = data.data.content.replace(" ", ""); // 处理空格
      data.data.content = data.data.content.replace(/<p>&nbsp;<\/p>/g, ""); // 处理空格
      data.data.content = data.data.content.replace(/<p><br><\/p>/g, ""); // 处理返回数据中的换行
      //处理返回数据中地址
      data.data.content = data.data.content.replace(
        /\/prod-api/g,
        "http://124.93.196.45:10001/prod-api"
      );
      this.newData = data.data;
    },
    // 列表翻页
    pageChange() {
      this.getNewCommentList();
    },
    // 评论列表
    async getNewCommentList() {
      const { data } = await getNewComment(this.info);
      if (data.code !== 200) return this.$toast(data.msg);
      this.totalPage = Math.ceil(data.total / 10);
      this.commentList = data.rows;
      // console.log(this.commentList);
    },
  },
  created() {
    this.info.id = this.$route.query.id;
    this.getNewDetailData();
    this.getNewCommentList();
  },
};
</script>

<style lang="scss" scoped>
.new-detail {
  .detail-head {
    background: #fff;
    padding-left: 10px;
    padding-right: 10px;
    height: 80px;
    line-height: 80px;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    top: 0px;
    i {
      color: #666;
      font-size: 28px;
      position: absolute;
      left: 0;
      top: 30px;
    }
  }
  ::v-deep .detail-content {
    margin-left: 20px;
    margin-right: 20px;
    h3 {
      font-size: 20px;
      height: 60px;
      line-height: 30px;
      text-align: center;
      margin-bottom: 20px;
    }
    div {
      p {
        font-size: 14px;
        line-height: 18px;
        text-indent: 2em;
        margin-bottom: 10px;
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .detail-comment {
    padding-left: 10px;
    padding-right: 10px;
    background: #fff;
    .comment-head {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      height: 50px;
      line-height: 50px;

      h3 {
        font-size: 20px;
      }
      .van-pagination {
        margin-top: 5px;
        width: 200px;
        font-size: 12px;
        ::v-deep li:after {
          content: " ";
          display: block;
          border: none;
        }
      }
    }
    .comment-content {
      .content-item {
        margin-top: 10px;
        border-bottom: 1px solid #eee;
        position: relative;
        h3 {
          height: 30px;
          font-size: 16px;
          line-height: 30px;
          position: relative;
          padding-left: 20px;
          span {
            position: absolute;
            right: 20px;
            top: 0;
          }
        }
        p {
          font-size: 14px;
          margin-bottom: 30px;
          padding-left: 40px;
        }
        span {
          display: block;
          font-size: 12px;
          color: #999;
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
    }
  }
  //详情弹窗
  .van-popup {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;

    padding-left: 20px;
    h3 {
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      position: relative;
      margin-top: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      span {
        position: absolute;
        right: 30px;
      }
    }
    p {
      font-size: 16px;
      line-height: 24px;
      padding-left: 30px;
      padding-bottom: 30px;
    }
    .detail-time {
      padding-left: 20px;
      display: block;
      font-size: 14px;
      height: 16px;
      line-height: 16px;
      width: 150px;
      overflow: hidden;
    }
  }
  .comment-sent {
    border-top: 1px solid #eee;
    background: #fff;
    height: 60px;
    padding: 10px;
    font-size: 20px;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    h3 {
      margin-bottom: 10px;
    }
    div {
      height: 20px;
      input {
        border-radius: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 10px;
        border: 0;
        background: #eee;
      }
      button {
        background: none;
        box-shadow: 5px;
        border: 0;
        color: #333;
      }
    }
  }
}
</style>
